<template>
  <div class="businessBox" @mouseleave="$emit('mouseleave')">
      <div class="left">
<!--        v-if="userType.includes('货主') || userType.includes('货代') || !isLogin"-->
<!--        v-if="userType.includes('运输公司') || !isLogin"-->
<!--        <span :class="[{active:item.key == select}]" v-for="(item,index) in selectList" @click="select = item.key">{{ item.title }}</span>-->
        <span :class="[{active:select ==3}]" @click="select = 3" >船期计划</span>
        <span  :class="[{active:select==1 }]" @click="select = 1" >集装箱业务</span>
        <span :class="[{active:select ==2}]" @click="select = 2" >件散货业务</span>

      </div>
    <div class="right">
      <businessItem v-for="i in list" :params="i" :router1List="router1List" :router2List="router2List" :router3List="router3List"></businessItem>
      <div class="businessItem" v-if="list.length<2"></div>
      <div class="businessItem" v-if="list.length<3"></div>
      <div class="businessItem" v-if="list.length<4"></div>
      <div class="businessItem" v-if="list.length<5"></div>
      <div class="businessItem" v-if="list.length<6"></div>
      <div class="businessItem" v-if="list.length<7"></div>
      <div class="businessItem" v-if="list.length<8"></div>
    </div>
    <img class="saojiao" src="../../../assets/sanjiao.png" alt="">
  </div>
</template>

<script>
import businessItem from "@/views/Main/module/businessItem";
export default {
  name: "businessBox",
  components:{
    businessItem
  },
  computed:{
    list(){
      return this['list'+this.select]
    },
    router1List(){
      return this.list1.map(x=>x.name)
    },

    router2List(){
      return this.list2.map(x=>x.name)
    },
    router3List(){
      return this.list3.map(x=>x.name)
    },
  },
  data(){
    return {
      select:3,
      selectList:[
        {
          key:1,
          title:'集装箱业务'
        },
        {
          key:2,
          title:'件散货业务'
        },
        {
          key:3,
          title:'船期计划'
        },
      ],
      list1:[
        {
          title: '提重返空',
          name: 'heavyEmpty',
          query: {
            type: 'XCZT_G',
          },
        },
        {
          title: '提空返重(指定箱号)',
          name: 'emptyHeavyNum',
          query: {
            type: 'XCRK_G',
          },
        },
        {
          title: '提空返重(不指定箱号)',
          name: 'emptyHeavyNoNum',
          query: {
            type: 'ZCZZ_G',
          },
        },
        {
          title: '进空箱',
          name: 'emptyBox',
          query: {
            type: 'ZCCK_G',
          },
        },
        {
          title: '进重箱',
          name: 'heavyBox',
          query: {
            type: 'JH_G',
          },
        },
        {
          title: '提重箱',
          name: 'heayBoxNum',
          query: {
            type: 'TH_G',
          },
        },
        {
          title: '提空箱(指定箱号)',
          name: 'emptyBoxNum',
          query: {
            type: 'TH_G',
          },
        },{
          title: '更多',
          name: 'emptyBoxNoNum',
          query: {
            type: 'TH_G',
          },
        },
      ],
      list2: [
            {
              title: '卸船直提',
              name: 'jUnloadLift',
              query: {
                type: 'XCZT_G',
              },
            },
            {
              title: '卸船入库',
              name: 'jUnloadIn',
              query: {
                type: 'XCRK_G',
              },
            },
            {
              title: '装船直装',
              name: 'jLoadLift',
              query: {
                type: 'ZCZZ_G',
              },
            },
            {
              title: '装船出库',
              name: 'jLoadIn',
              query: {
                type: 'ZCCK_G',
              },
            },
            {
              title: '进货',
              name: 'jImport',
              query: {
                type: 'JH_G',
              },
            },
            {
              title: '提货',
              name: 'jOutput',
              query: {
                type: 'TH_G',
              },
            },
          ],
      list3:[
        {
          title: '件散货船期',
          name: 'addBulk',
          query: {
            type: 'TH_G',
          },
        },
        {
          title: '集装箱船期',
          name: 'addContainer',
          query: {
            type: 'TH_G',
          },
        },
        {
          title: '装船清单',
          name: 'loadList',
          query: {
            type: 'TH_G',
          },
        },
        {
          title: '卸船清单',
          name: 'unloadList',
          query: {
            type: 'TH_G',
          },
        },
      ],
    }
  },
}
</script>

<style scoped lang="less">
.businessBox{
  width: 859px;
  height: 250px;
  z-index:9999;
  position: relative;
  border-top: 2px solid #0C4AC1;
  display: flex;
  .saojiao{
    position: absolute;
    top:-11px;
    left:340px;
    width: 15px;
  }
  .right{
    width: calc(100% - 150px);
    background-color: white;
    height: calc(100% - 30px);
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .left{
    padding: 15px;
    width: 90px;
    height: calc(100% - 30px);
    background: #F6F6F6;
    color: #333333 ;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    span{
      display: inline-block;
      padding-left: 10px;
      border-left: 3px solid #F6F6F6;
      cursor: pointer;
      margin-bottom: 22px;
      &:first-child{
        margin-top: 10px;
      }
    }
    .active{
      color: #0C4AC1;
      border-left: 3px solid #0C4AC1;
    }
  }

}
.businessItem{
  width: 161px;
}
</style>